<template>
  <div>
    <!-- top -->
    <avue-data-tabs :option="option2" class="equipmentClass"></avue-data-tabs>
    <div class="container top" v-if="data">
      <diy-container>
        <wel-top-module :data="data.dateInfo" title="日激活"></wel-top-module>
      </diy-container>
      <diy-container>
        <wel-top-module :data="data.monthInfo" title="月激活">
          <el-date-picker
            v-model="data.monthInfo.date"
            style="font-size: 18px;"
            @change="query('monthTime', data.monthInfo.date)"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
            size="large"
            
          >
          </el-date-picker>
        </wel-top-module>
      </diy-container>
      <diy-container>
        <wel-top-module :data="data.yearInfo" title="年激活">
          <el-date-picker
            v-model="data.yearInfo.date"
            style="font-size: 18px;"
            type="year"
            @change="query('yearTime', data.yearInfo.date)"
            value-format="yyyy"
            placeholder="选择年"
            size="large"
          >
          </el-date-picker>
        </wel-top-module>
      </diy-container>
      <diy-container>
        <wel-top-module :data="data.totalInfo" title="总激活"> </wel-top-module>
      </diy-container>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <avue-data-tabs :option="option"></avue-data-tabs>
    </div>
  </div>
</template>

<script>
import welTopModule from "./wel-top-module";
import { queryActiveStatisticInfo, queryStatisticInfo } from "@/api/houxin/wel";
export default {
  name: "wel",
  components: { welTopModule },
  data() {
    return {
      data:"",
      option: {},
      option2:{}
    };
  },
  created() {
    queryActiveStatisticInfo().then((r) => {
      this.data = r.data.data;
      this.option = {
        span: 6,
        data: [
          {
            title: "日激活数量",
            count: this.data ? this.data.dateInfo.count : 0,
            text: this.data ? this.data.dateInfo.date : "",
            color: "rgb(27, 201, 142)",
            key: "日",
          },
          {
            title: "月激活数量",
            count: this.data ? this.data.monthInfo.count : 0,
            text: this.data ? this.data.monthInfo.date : "",
            color: "rgb(230, 71, 88)",
            key: "月",
          },
          {
            title: "年激活数量",
            count: this.data ? this.data.yearInfo.count : 0,
            text: this.data ? this.data.yearInfo.date : "",
            color: "rgb(178, 159, 255)",
            key: "年",
          },
          {
            title: "总激活数量",
            count: this.data ? this.data.totalInfo.count : 0,
            text: this.data ? this.data.totalInfo.date : "",
            color: "rgb(178, 159, 255)",
            key: "总",
          },
        ],
      };
      this.option2 = {
        span: 24,
        data: [
          {
            title: "设备总数",
            count: this.data.deviceTotal,
            color: "rgb(117, 56, 199)",
            key: "量",
          },
        ],
      };
    });
  },
  methods: {
    query(valueName, value) {
      let data = {};
      data[valueName] = value;
      queryStatisticInfo(data).then((r) => {
        r = r.data.data;
        if (valueName == "monthTime") {
          this.data.monthInfo = r;
          this.option.data[1].count = r.count;
          this.option.data[1].text = r.date;
        } else if (valueName == "yearTime") {
          this.data.yearInfo = r;
          this.option.data[2].count = r.count;
          this.option.data[2].text = r.date;
        }
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.avue-view {
  padding-bottom: 0px !important;
}
.avue-main {
  padding-bottom: 0px !important;
}

.container {
  display: flex;
  justify-content: space-around;
}
.top {
  height: calc(45vh - 66px);
}

.equipmentClass {
  /deep/ .item {
    height: 84px;
  }
  /deep/.item-tip {
    width: 50px;
    height: 50px;
    bottom: -18px;
    font-size: 29px;
  }
}
</style>
